<%@page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<html>
<head>
    <style type="text/css">
        #mydiv {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }

        .mouseOver {
            background: #708090;
            color: #FFFAFA;
        }

        .mourseOut {
            background: #FFFAFA;
            color: #000000;
        }


    </style>

</head>

<body>
<div id="mydiv">
    <%--输入框--%>
    <input type="text" size="50" id="keyword"
           onblur="keywordBlur()"<%--onblur：失去鼠标焦点事件--%>
           onfocus="getMoreContents()"<%--获得焦点是显示提示框--%>
           onkeyup="getMoreContents()"/><%--onkeyup：键盘放下触发事件--%>
    <input type="button" value="百度一下" width="50px"/>

    <div id="popDiv">
        <table id="content_table" bgcolor="#f0f8ff" border="0" cellspacing="0" cellpadding="0">
            <tbody id="content_table_body">
            <%--动态查询出来的数据显示在这里--%>
            <%--<tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>--%>
            </tbody>
        </table>
    </div>

</div>
<script type="text/javascript">

    var xmlHttp;

    //获取用户输入内容的关联信息的函数
    function getMoreContents() {
        //1.首先要获得用户的输入
        var content = document.getElementById("keyword");
        if (content.value == "") {
            clearContent();//按“Backspace”键时,清空提示框
            return;
        }
//            alert(content.value)
        //2.然后要给服务器发送用户输入的内容，因为我们采用的是Ajax异步发送数据，所有我们要使用一个对象，叫做XmlHttp对象
        xmlHttp = createXmlHttp();
//            alert(xmlHttp)
        //3.要给服务器发送数据
        var url = "search?keyword=" + escape(content.value);
        /*escape(content.value)：不加的话中文可能有问题*/
        //true表示JavaScript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
        xmlHttp.open("GET", url, true);
        //4.xmlHttp绑定回掉方法，这个回掉方法会在xmlHttp状态改变的时候被调用
        //xmlHttp的状态0-4，我们只关心4（complete）这个状态，当完成之后，在调用回调方法才有意义
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send(null);

    }

    //获得xmlHttp对象
    function createXmlHttp() {
        //对于大多数的浏览器都适用
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        //要考虑浏览器的兼容性
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            if (!xmlHttp) {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
        return xmlHttp;
    }

    //回调函数
    function callback() {
        //“4”代表完成
        if (xmlHttp.readyState == 4) {
            //"200"代表服务器响应成功
            if (xmlHttp.status == 200) {
                //交互成功，获得相应的数据，是文本格式
                var result = xmlHttp.responseText;
                //解析获得的数据  java中的json和JS中的json有差别
                var json = eval("(" + result + ")");
                //5.获得数据之后，动态的显示这些数据，把其展示到输入框的下面
//                alert(json);
                setContent(json);
            }
        }
    }

    //设置关联数据的展示，参数代表的是服务器传递过来的关联数据
    function setContent(contents) {
        //先清空内容
        clearContent();

        setLocaltion();

        //首先获得关联数据的长度，以此来确定生成多少<tr></tr>
        var size = contents.length;
        //设置内容
        for (var i = 0; i < size; i++) {
            var nextNode = contents[i];//代表的是json格式数据的第i个元素
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.setAttribute("border", "0");
            td.setAttribute("bgcolor", "#FFFAFA");
            td.onmousemove = function () {/*鼠标滑过事件*/
                this.className = 'mouseOver';
            }
            td.onmouseout = function () {/*鼠标滑出事件*/
                this.className = 'onmouseOut';
            }
            td.onclick = function () {
                //当用鼠标点击一个关联的数据时，关联数据自动设置为输入框的数据

            }
            var text = document.createTextNode(nextNode);
            td.appendChild(text);
            tr.appendChild(td);
            document.getElementById("content_table_body").appendChild(tr);
        }
    }

    //清空之前的数据
    function clearContent() {
        var contentTableBody = document.getElementById("content_table_body");
        var size = contentTableBody.childNodes.length;
        for (var i = size - 1; i >= 0; i--) {
            contentTableBody.removeChild(contentTableBody.childNodes[i]);
        }
        document.getElementById("popDiv").style.border = "none";
    }

    //失去焦点时，清空数据
    function keywordBlur() {
        clearContent()
    }

    //设置显示关联信息的显示位置
    function setLocaltion() {
        //关联信息的显示位置要和输入框一致
        var content = document.getElementById("keyword");
        var width = content.offsetWidth;//输出框的宽度
        var left = content["offsetLeft"];//到左边框的距离
        var top = content["offsetTop"] + content.offsetHeight;//到顶部的距离

        //获取显示数据的div
        var popDiv = document.getElementById("popDiv");
        popDiv.style.border = "black 1px solid";
        popDiv.style.left = left + "px";
        popDiv.style.top = top + "px";
        popDiv.style.width = width + "px";

        document.getElementById("content_table").style.width = width + "px";

    }
</script>

</body>
</html>
